<template>
  <div>
    <NavBar>
      <template v-slot:default>{{ detail.title }}</template>
    </NavBar>
    <div class="container">
      <div class="goodsImg">
        <van-image width="100%" height="100%" lazy-load :src="detail.cover_url" />
      </div>
      <hr />
      <!-- 商品信息 -->
      <div>
        <van-card style="text-align: left;font-size: 16px" :num="detail.stock" :price="detail.price + '.00'" :desc="detail.description" :title="detail.title">
          <template #tags>
            <van-tag plain type="danger">新书</van-tag>
            <van-tag plain type="danger">推荐</van-tag>
          </template>
          <template #footer>
            <van-button type="warning" @click.native="addCart(detail.id)">加入购物车</van-button>
            <van-button type="danger" @click.native="goShopCart(detail.id)">立即购买</van-button>
          </template>
        </van-card>
      </div>
      <!-- tab -->
      <div class="goodsTab">
        <van-tabs v-model="active">
          <van-tab title="概述">
            <div v-html="detail.details"></div>
          </van-tab>
          <van-tab title="热评">
            <div v-if="detail.comments.length">
              <p v-for="(item, index) in detail.comments" :key="index">{{item}}</p>
            </div>
            <div style="padding: 30px 0px" v-else>
              暂无评论
            </div>
          </van-tab>
          <van-tab title="相关图书">
            <goods-list :goods="like_goods" />
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { useRoute, useRouter } from "vue-router";
import { ref, onMounted, reactive, toRefs } from "vue";
import NavBar from "components/common/navbar/NavBar";
import { getDetailInfo } from "network/detail.js";
import GoodsList from "components/content/goods/GoodsList";
import { useStore } from "vuex";
import { addCarts } from "network/cart.js";
import { Toast } from "vant";

export default {
  name: "detail",
  setup() {
    const route = useRoute();
    const router = useRouter();
    const store = useStore();
    let active = ref(0);
    let bookInfo = reactive({
      detail: {},
      like_goods: [],
    }); // 详情信息

    let id = ref(0); // 商品ID
    id.value = route.query.id;

    onMounted(() => {
      getDetailInfo(route.query.id).then((res) => {
        bookInfo.detail = res.goods;
        bookInfo.like_goods = res.like_goods;
      });
    });

    const addCart = (id) => {
      addCarts(id).then((res) => {
        if (res.status === 201 || res.status === 204) {
          Toast.success("添加成功");
          store.dispatch("updateCartsCount");
        }
      });
    };

    const goShopCart = (id) => {
      addCarts(id).then((res) => {
        if (res.status === 201 || res.status === 204) {
          Toast.success("添加成功");
          store.dispatch("updateCartsCount");
          router.push("/shopcart");
        }
      });
    };

    return {
      ...toRefs(bookInfo),
      id,
      active,
      addCart,
      goShopCart,
    };
  },
  components: {
    NavBar,
    GoodsList,
  },
};
</script>

<style lang="scss">
.container {
  .goodsImg {
    padding: 10px;
  }
  .goodsTab {
    margin-bottom: 60px;
    img {
      width: 100%;
      height: auto;
    }
  }
}
.van-card__desc {
  margin: 10px 0px;
}
.van-tag {
  margin-right: 10px;
}
.van-card__bottom {
  margin-top: 10px;
}
</style>
